<template>
  <div>
    <h3>子组件</h3>
    <p>计算属性:{{ num }}</p>
    <p>toRef:{{ a }}</p>
    <p>toRefs:{{ a }}--{{ b }}</p>
  </div>
</template>

<script>
import { computed, onMounted, reactive, toRef, toRefs } from "vue";
export default {
  setup(props) {
    const obj = reactive({
      a: 1,
      b: 2,
    });
    //toRef单个的解构一个,toRefs是解构一个对象里所有的属性
    const a = toRef(obj, "a");
    onMounted(() => {
      console.log(props);
    });
    const num = computed(() => {
      return 123;
    });
    return {
      num,
      ...toRefs(obj),
      a,
    };
  },
};
</script>

<style></style>
